<template>
  <head-top></head-top>
  <div class="item_center">
    <div class="box_size">
      <div style="width: 1200px;;margin-top: 30px;margin-bottom: 20px;display:flex;justify-content: space-between">
        <div>
          <el-image :src="require('@/assets/website_logo.png')" style="height: 80px" @click="goHome"></el-image>
        </div>
        <div>
          <el-image :src="require('@/assets/order/text.png')" style="height: 80px"></el-image>
        </div>
      </div>
      <el-card>
        <div>
          <el-card>
            <template #header>
              <div class="card-header">
                <span>订单信息</span>
              </div>
            </template>
            <div>
              <p><span class="">订单编号</span>：{{ orderDetail.orderInfo?.id }}</p>
              <p>
                订单状态：
                <span v-if="orderDetail.orderInfo?.status==0">待付款</span>
                <span v-else-if="orderDetail.orderInfo?.status==1">待发货</span>
                <span v-else-if="orderDetail.orderInfo?.status==2">待收货</span>
                <span v-else-if="orderDetail.orderInfo?.status==3">已完成</span>
                <span v-else-if="orderDetail.orderInfo?.status==4">已关闭</span>
                <span v-else-if="orderDetail.orderInfo?.status==5">无效订单</span>
              </p>
              <p>
                订单创建时间：{{ orderDetail.orderInfo?.createTime }}
              </p>
              <div>
                <p>应付金额：{{ orderDetail.orderInfo?.payAmount }}</p>
              </div>
              <el-row>
                <el-col :span="3">
                  <div>
                    支付方式:
                  </div>
                </el-col>
                <el-col :span="6">
                  <div style="height: 40px;width: 40px">
                    <el-image :src="require('@/assets/icon/zhifubaozhifu.png')"></el-image>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </div>
        <div>
          <el-card>
            <template #header>
              <div class="card-header">
                <span>订单项信息</span>
              </div>
            </template>
            <div>
              <el-table :data="orderDetail.items" style="width: 100%">
                <el-table-column prop="skuName" label="商品名" width="180"/>
                <el-table-column label="预览" width="180">
                  <template #default="scope">
                    <div>
                      <el-image :src="$img+scope.row.skuPic" style="height: 100px"></el-image>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="spuBrand" label="品牌"/>
                <el-table-column prop="skuPrice" label="单价"/>
                <el-table-column prop="skuQuantity" label="购买数量"/>
                <el-table-column prop="skuAttrsVals" label="属性"/>
              </el-table>
            </div>
          </el-card>
        </div>
        <div>
          <el-card>
            <template #header>
              <div class="card-header">
                <span>收货人信息</span>
              </div>
            </template>
            <div>
              <p> 收货人姓名：{{ orderDetail.orderInfo?.receiverName }}</p>
              收货地址:
              {{ orderDetail.orderInfo?.receiverProvince }}
              {{ orderDetail.orderInfo?.receiverCity }}
              {{ orderDetail.orderInfo?.receiverRegion }}
              {{ orderDetail.orderInfo?.receiverDetailAddress }}
              <p> 联系方式：{{ orderDetail.orderInfo?.receiverPhone }}</p>
            </div>
          </el-card>
        </div>
        <div>
          <el-card>
            <template #header>
              <div class="card-header">
                <span>物流信息</span>
              </div>
            </template>
            <div v-if="orderDetail.orderInfo?.status==2">
              <p>
                物流编号：{{ orderDetail.orderInfo?.deliverySn }}
              </p>
              <p>
                物流公司：{{ orderDetail.orderInfo?.deliveryCompany }}
              </p>
            </div>
            <div v-else>
              暂无
            </div>
          </el-card>
        </div>
      </el-card>
      <div v-if="orderDetail.orderInfo?.status === 0" class="one_grandson2"
           style="display: flex;justify-content: end">
        <el-button @click="goToPay" type="danger">去支付</el-button>
      </div>
    </div>
  </div>
  <div>
    <el-dialog
        v-model="dialogVisible"
        title="支付结果"
        width="500"
        :before-close="handleClose"
    >
      <span>是否成功支付？</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消支付</el-button>
          <el-button type="primary" @click="queryOrderPayReult">
            支付成功
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {getOrderById, orderPay, queryOrderPay} from '@/api/order'
import {onMounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {ArrowLeft} from '@element-plus/icons-vue'
import HeadTop from "@/components/home/HeadTop";

let route = useRoute()
let router = useRouter()
let orderDetail = ref({})
let dialogVisible = ref(false)

function getOrderInfo() {
  getOrderById(route.query.orderId).then(res => {
    orderDetail.value = res.data
  })
}

function goToPay() {
  orderPay(orderDetail.value.orderInfo.id).then(res => {
    let obj = window.open("about:blank", "_blank");
    obj.document.write(res.data);
  })
  dialogVisible.value = true
}

/**
 * 查询支付结果
 */
function queryOrderPayReult() {
  queryOrderPay(orderDetail.value.orderInfo.id).then(res => {
    getOrderInfo()
  })
  dialogVisible.value = false
}

function back() {
  router.go(-1)
}

onMounted(() => {
  getOrderInfo()
})
</script>

<style scoped>

</style>
